<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
import { onMounted, ref } from "vue";
import OpsTable from "@/views/dashboard/ops/components/OpsTable/OpsTable";
import OpsTableColumn from "@/views/dashboard/ops/components/OpsTable/OpsTableColumn";
// Echarts 为init（dom元素后的类型）
// EChartsOption 为 option 的类型

const props = defineProps({ max: Number, data: Array<any>, title: String });

let uid: any = Math.floor(Math.random() * 10000);
const option: EChartsOption = {
	xAxis: {
		type: "category"
	},
	yAxis: {
		type: "value",
		axisLabel: {
			show: true,
			interval: "auto",
			formatter: function (value: number) {
				return ((value / (props.max || 100)) * 100).toFixed(0) + "%";
			}
		},
		splitLine: {
			lineStyle: {
				color: ["#333"]
			}
		},
		show: true
	},
	legend: {
		padding: 2
	},
	grid: {
		left: "5%",
		right: "2%",
		top: 10,
		bottom: 20
	},
	series: [
		{
			data: props.data,
			type: "line"
		}
	]
};

const rowData = ref([
	{
		mission: "Voyager",
		company: "NASA",
		location: "Cape Canaveral",
		date: "1977-09-05",
		rocket: "Titan-Centaur ",
		price: 86580000,
		successful: true
	},
	{
		mission: "Apollo 13",
		company: "NASA",
		location: "Kennedy Space Center",
		date: "1970-04-11",
		rocket: "Saturn V",
		price: 3750000,
		successful: false
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	}
]);
onMounted(() => {
	const echartsDom = document.getElementById(uid.toString()) as HTMLElement;
	const charEch: ECharts = init(echartsDom);
	charEch.setOption(option);
	window.addEventListener("resize", () => {
		charEch.resize();
	});
});
</script>

<template>
	<div class="p-3 rounded bg-ops-card-bg-black flex flex-col">
		<div class="w-full text-center">{{ props.title }}</div>
		<div :id="uid + ''" style="width: 100%; height: 100%" class="echartsDom"></div>

		<ops-table :tableData="rowData" class="h-1/4">
			<ops-table-column tableHead="" props="mission"></ops-table-column>
			<ops-table-column tableHead="company" props="company"></ops-table-column>
		</ops-table>
	</div>
</template>

<style scoped lang="scss">
.echartsDom {
	flex: 1;
}

.table {
	flex: 3;
}
</style>
